<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录/注册</title>
  <link rel="stylesheet" href="css/loginframe.css">
</head>

<body>
  <div id="loginframe">
    <div class="login-wrap">
      <!-- 短信登陆/注册，密码登录 -->
      <div class="login">
        <!-- 切换菜单 -->
        <div class="switch-tabs">
          <div class="tab-start clearfix">
            <span class="left on">短信登录／注册</span>
            <span class="right">密码登录</span>
          </div>
          <div class="tab-quick hidden">
            <div class="qr-title">二维码登录</div>
          </div>
          <div class="switch-icon">
            <a href="" class="icon iconqr"></a>
            <a href="" class="icon iconpc hidden"></a>
          </div>
        </div>

        <!-- 登录表单 -->
        <div class="login-form">
          <!-- 短信登录/注册表单 -->
          <div class="msg-login">
            <div class="form-tips">
              请仔细阅读
              <a href="">豆瓣使用协议、隐私政策</a>
            </div>
            <div class="error">
              <span></span>
            </div>
            <div class="form-item">
              <label class="form-label">手机号：</label>
              <input type="phone" maxlength="13" placeholder="手机号">
              <div class="area-code">
                <div class="code-label">
                  +86
                </div>
              </div>
            </div>
            <div class="form-item">
              <label class="form-label">验证码：</label>
              <input type="text" maxlength="6" placeholder="验证码">
              <div class="form-code">
                <a href="">获取验证码</a>
              </div>
            </div>
            <div class="form-submit">
              <a href="" class="btn btn-active">登录豆瓣</a>
            </div>
            <div class="form-ft">
              <!-- 账号安全改进 2020-09-23 -->
              <!-- <p class="form-remember left">
                <input type="checkbox">
                <label for="form-remember">下次自动登录</label>
              </p> -->
              <p class="form-link t-right">
                <a href="" class="help-link">收不到验证码</a>
              </p>
            </div>
          </div>
          <!-- 密码登录表单 -->
          <div class="pwd-login hidden">
            <div class="form-tips t-right">
              <a href="">找回密码</a>
            </div>
            <div class="form-item">
              <label class="form-label">用户名：</label>
              <input type="text" name="username" placeholder="手机号 / 邮箱">
            </div>
            <div class="form-item">
              <label class="form-label">密码：</label>
              <input type="password" name="password" placeholder="密码">
            </div>
            <div class="form-submit">
              <a href="" class="btn btn-active">登录豆瓣</a>
            </div>
            <div class="form-ft">
              <!-- 账号安全改进 2020-09-23 -->
              <!-- <p class="form-remember left">
                <input type="checkbox">
                <label for="form-remember">下次自动登录</label>
              </p> -->
              <p class="form-link t-right">
                <a href="" class="help-link">海外手机登录</a>
              </p>
            </div>
          </div>
          <!-- 第三方登录 -->
          <div class="form-3rd">
            <div class="form-3rd-hd">第三方登录: </div>
            <div class="form-3rd-bd">
              <a href="" class="link-wx" title="用微信登录">weichat</a>
              <a href="" class="link-wb" title="用微博登录">weibo</a>
            </div>
          </div>
        </div>

      </div>
      <!-- 扫码登录 -->
      <div class="login-qrcode hidden">
        <div class="qr-scan">
          <img src="img/qrlogin_code.png" alt="">
        </div>
        <div class="qr-text">请打开豆瓣客户端扫一扫</div>
      </div>
    </div>
    <!-- 选择国际区号 -->
    <div class="country-code-modal hidden">
      <div class="country-code-msk"></div>
      <div class="country-code-dialog">
        <div class="dialog-content">
          <a href="#" class="dialog-close">X</a>
          <div class="hd">
            <h3>选择国际区号</h3>
          </div>
          <div class="bd">
            <ul class="codeList clearfix">
              <li class="isActive">
                <span class="codeItem-district left">中国大陆</span>
                <span class="codeItem-number right">+86</span>
              </li>
              <li>
                <span class="codeItem-district left">中国香港</span>
                <span class="codeItem-number right">+852</span>
              </li>
              <li>
                <span class="codeItem-district left">中国澳门</span>
                <span class="codeItem-number right">+853</span>
              </li>
              <li>
                <span class="codeItem-district left">中国台湾</span>
                <span class="codeItem-number right">+886</span>
              </li>
              <li>
                <span class="codeItem-district left">日本</span>
                <span class="codeItem-number right">+81</span>
              </li>
              <li>
                <span class="codeItem-district left">韩国</span>
                <span class="codeItem-number right">+82</span>
              </li>
              <li>
                <span class="codeItem-district left">新加坡</span>
                <span class="codeItem-number right">+65</span>
              </li>
              <li>
                <span class="codeItem-district left">泰国</span>
                <span class="codeItem-number right">+66</span>
              </li>
              <li>
                <span class="codeItem-district left">马来西亚</span>
                <span class="codeItem-number right">+60</span>
              </li>
              <li>
                <span class="codeItem-district left">美国</span>
                <span class="codeItem-number right">+1</span>
              </li>
              <li>
                <span class="codeItem-district left">加拿大</span>
                <span class="codeItem-number right">+1</span>
              </li>
              <li>
                <span class="codeItem-district left">澳大利亚</span>
                <span class="codeItem-number right">+61</span>
              </li>
              <li>
                <span class="codeItem-district left">英国</span>
                <span class="codeItem-number right">+44</span>
              </li>
              <li>
                <span class="codeItem-district left">德国</span>
                <span class="codeItem-number right">+49</span>
              </li>
              <li>
                <span class="codeItem-district left">法国</span>
                <span class="codeItem-number right">+33</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>